<template>
    <div class="search">
        <Navbar />
        <div class="search__container">
            <h2>Find You Need</h2>
            <h2>Goods</h2>
            <p>Healthy and cheap</p>
            <p>Eat something good, my treasure</p>
            <form @submit="pathTo">
                <input type="text" v-model="searchInput" placeholder="what goods do you need?">
                <van-button color="#ffcd41" native-type="submit" type="primary" block>FIND
                    GOODS</van-button>
            </form>
        </div>
    </div>
</template>

<script setup lang="ts">
import Navbar from '@/components/Navbar.vue';
import { ref } from 'vue'
import { useRouter } from "vue-router"
const searchInput = ref<string>('')
const router = useRouter()
const pathTo = () => {
    router.push({ path: `/find/${searchInput.value}`, query: { type: 'search', name: "result" } })
}
</script>

<style lang="scss">
.search {
    background: var(--linear-gradient);

}

.search__container {
    height: calc(100vh - 77rem);
    color: var(--font-color);
    padding-bottom: 100rem;
    box-sizing: border-box;
    font-size: 16rem;
    @include flex(column, center, center);

    h2 {
        font-weight: 500;
        color: $color-yellow;
        text-align: center;
        font-size: 32rem;
    }

    p {
        font-size: 14rem;
        text-align: center;
        color: #919193;
    }

    p:first-of-type {
        margin-top: 20rem;
    }

    input {
        margin: 40rem 0 24rem;
        outline: none;
        border: none;
        width: 310rem;
        height: 50rem;
        padding: 10px;
        box-sizing: border-box;
        border-radius: 4rem;
        color: var(--font-color);

        background: var(--backgound-color);
        box-shadow: 0rem 2rem 19rem rgba(0, 0, 0, 0.25);


    }
}

::-webkit-input-placeholder {
    /* WebKit browsers，webkit内核浏览器 */
    color: #ccc;
    font-size: 14rem;
}
</style>